<template>
  <div class="container">
    <div class="card">
      <div class="header">
        <div style="color: #A71E32">等次配置</div>
        <div class="operate">
          <el-pagination background layout="total, sizes, prev, pager, next"
                         :total="totalCount" v-model:page-size="pageSize" :page-sizes="[40, 80, 160, 240, 400, 600]"
                         @size-change="handleSizeChange" @current-change="onCurrentClick"/>
          <el-button type="warning" @click="reloadData">刷新</el-button>
          <el-button type="primary" @click="addRankAdjust">新增</el-button>
        </div>
      </div>
      <div class="body">
        <el-table class="party" :data="rankData" border :key="needFlashData"
                  :header-cell-style="{'text-align': 'center'}"
                  empty-text="请添加等次配置" style="width: 100%;height: 100%">
          <el-table-column type="index" label="序号" align="center" width="80"/>
          <el-table-column prop="type" label="类别" align="center" min-width="100"/>
          <el-table-column prop="situation" label="情形" align="center" min-width="30"/>
          <el-table-column prop="exist" label="有/无" align="center" min-width="80"/>
          <el-table-column prop="remark" label="备注" align="left" min-width="100"/>
          <el-table-column prop="operate" label="操作" align="center" width="80">
            <template #default="scope">
              <div style="display: flex;justify-content: space-around; flex-direction: column-reverse;gap: 20px">
                <el-link :underline="false" type="danger" v-on:click="deleteOperate(scope.row)">删除</el-link>
                <el-link :underline="false" type="primary" v-on:click="editOperate(scope.row)">修改</el-link>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <rank-info v-model:visible="showRankInfo" :data="editRankInfo" @reload:data="reloadData"></rank-info>
  </div>
</template>

<script lang="ts">
export default {
  name: "RankAdjust"
}
</script>

<script setup lang="ts">
import {onMounted, ref} from "vue";
import {useUserStore} from "@/store/user";
import {IRankAdjust} from "@/iwb/IParty";
import {DialogUtils} from "@/utils/DialogUtils";
import {deleteRankAdjust, getRankAdjust} from "@/api/party";
import RankInfo from "@/components/party/RankInfo.vue";

const pageIndex = ref(0);
const pageSize = ref(40);
const totalCount = ref(0);
const needFlashData = ref(false);
const rankData = ref([] as Array<IRankAdjust>)
const showRankInfo = ref(false);
const editRankInfo = ref({} as IRankAdjust);

const handleSizeChange = (size: number) => {
  pageIndex.value = 0;
  totalCount.value = 0;
  const index = pageIndex.value;
  pageSize.value = size;
  const userStore = useUserStore();
  if (totalCount.value > index * size || pageIndex.value ===0) {
    getRankAdjust(pageIndex.value + 1, pageSize.value).then((res: any) => {
      totalCount.value = res.data.total;
      rankData.value = res.data.ranks;
    })
  }
}

const onCurrentClick = (value: number) => {
  console.log(value);
  const index = value - 1;
  const size = pageSize.value;
  pageIndex.value = index;
  const userStore = useUserStore();
  if (totalCount.value > index * size || pageIndex.value ===0) {
    getRankAdjust(pageIndex.value + 1, pageSize.value).then((res: any) => {
      totalCount.value = res.data.total;
      rankData.value = res.data.ranks;
    })
  }
}

const reloadData = () => {
  pageIndex.value = 0;
  totalCount.value = 0;
  const index = pageIndex.value;
  const size = pageSize.value;
  if (totalCount.value > index * size || pageIndex.value ===0) {
    getRankAdjust(pageIndex.value + 1, pageSize.value).then((res: any) => {
      totalCount.value = res.data.total;
      rankData.value = res.data.ranks;
    })
  }
}

/**
 * 新镇等次调整
 */
const addRankAdjust = () => {
  showRankInfo.value = true;
}

const deleteOperate = (row: IRankAdjust) => {
  DialogUtils.showMessageBox('温馨提示', '是否确定删除等次配置:['+row.type+','+row.situation+']', {type: 'warning'}).then(()=>{
    deleteRankAdjust(row.id).then(()=>{
      reloadData();
    }).catch(error=>console.error(error));
  })
}

const editOperate = (row: any) => {

}

onMounted(()=> {
  reloadData();
})

</script>

<style scoped lang="scss">
@import "src/styles/variable";

.container {
  width: auto;
  height: 100%;
  padding: 10px;
  background-color: $color-background-base;
  border: 0;
  box-sizing: border-box;
}

.header {
  padding: 10px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid $color-border-base;
}

.card {
  width: 100%;
  height: 100%;
  background-color: $color-sub-background-base;
  overflow: auto;
}

.operate {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid $color-border-base;
}

.body {
  height: calc(100% - 54px);

  .party {
    width: auto;
  }
}
</style>